<template>
  <div>
    <van-overlay :show="loading">
      <div class="w-full h-full flex justify-center items-center">
        <van-loading />
      </div>
    </van-overlay>
    <div class="order-item">
      <div class="order-item-title">参观时间</div>
      <div class="order-item-row justify-between">
        <div class="order-item-title">
          {{ data.visitDate }}&nbsp;&nbsp;{{ data.visitPeriod }}
        </div>
        <div class="order-item-title text-blue-300">
          {{ filterOrderStatus(data.orderStatus) }}
        </div>
      </div>
      <div class="order-item-row">
        <label>预约编号</label>
        <label class="ml-4">{{ data.orderSn }}</label>
      </div>
      <div class="order-item-row">
        <label>预约时间</label>
        <label class="ml-4">{{ data.createTime }}</label>
      </div>
    </div>
    <div class="order-item">
      <div class="order-item-title">团体信息</div>
      <div class="order-item-row">
        <label>团队名称</label>
        <label class="ml-4">{{ data.teamName }}</label>
      </div>
      <div class="order-item-row">
        <label>团队人数</label>
        <label class="ml-4">{{ data.peopleNum + "人" }}</label>
      </div>
      <div class="order-item-row">
        <label>领队姓名</label>
        <label class="ml-4">{{ data.leaderName }}</label>
      </div>
      <div class="order-item-row">
        <label>领队电话</label>
        <label class="ml-4">{{ data.leaderPhone }}</label>
      </div>
      <div class="order-item-row">
        <label>序厅讲解</label>
        <label class="ml-4">{{
          data.isExplain == 1 ? "需要" : "不需要"
        }}</label>
      </div>
      <div class="flex justify-center mt-4">
        <van-button type="default" round @click="router.back()" size="small"
          >返回</van-button
        >
        <div style="width: 10px"></div>
        <van-button
          type="primary"
          round
          @click="onCancel"
          size="small"
          v-if="data.orderStatus != 3"
          >取消预约</van-button
        >
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onBeforeMount, toRaw } from "vue";
import router from "@/router";
import { useRoute } from "vue-router";
import { orderDetail, orderCancel } from "@/request/api/order";
import { showConfirmDialog, showNotify } from "vant";

const data = ref<any>({});
const loading = ref(false);

const filterOrderStatus = (orderStatus: number) => {
  
  switch (orderStatus) {
    case 0:
      return "待审核";
    case 1:
      return "审核不通过";
    case 2:
      return "成功预约";
    case 3:
      return "已取消";
    default:
      return "成功预约";
  }
}; 

const onCancel = () => {
  showConfirmDialog({
    title: "",
    message: "您确定要取消团队预约吗？",
  })
    .then(() => {
      const id = toRaw(data.value).id;
      loading.value = true;
      orderCancel(id)
        .then((res: any) => {
          showNotify({ type: "success", message: res.msg });
          onDetail(id);
        })
        .finally(() => {
          loading.value = false;
        });
    })
    .catch(() => {
      // on cancel
    });
};

const onDetail = (id: any) => {
  loading.value = true;
  orderDetail(id)
    .then((res: any) => {
      data.value = res.data;
    })
    .finally(() => {
      loading.value = false;
    });
};

onBeforeMount(() => {
  const id = useRoute().params.id;
  onDetail(id);
});
</script>

<style lang="scss" scoped>
.order-item {
  padding: 10px 20px;

  .order-item-title {
    font-size: 18px;
    font-weight: bold;
  }

  .order-item-row {
    display: flex;
    align-items: center;
    padding: 2px 0;
  }

  .order-item-tips {
    font-size: 16px;
    color: var(--base-color);
  }

  .order-item-link {
    font-size: 14px;
    color: var(--base-color);
  }

  label {
    font-size: 14px;
    line-height: 24px;
  }
}
</style>
